<template>
    <div class="body productList">

        <ul class="tabNav">
            <li :class="{tab_active:iscur==0}" @click="changenav(0)">
                <div v-html="navNamedai"></div>
            </li>
            <li :class="{tab_active:iscur==1}" @click="changenav(1)">
                <div v-html="navNamedxin"></div>
            </li>
        </ul>
        <div class="yjtg" v-if="ifsheniqng" @click="gohaibao(iscur)">
            <img src="../img/yjtuiguang.png" alt="">
        </div>
        <div class="conTent" v-show="iscur==0">
            <!--新的-->
            <div class="con_linew" v-for="(item,index) in this.productlistdata" :key="index" @click="turn_share(item.id,ifuser)">
                <div class="con_top">
                    <img :src="item.image" alt="">
                    <span>{{item.name}}</span>
                    <p>奖励<i>{{item.reward?item.reward:0}}</i></p>
                </div>
                <div class="consml_rig">
                    <div class="consml_cen">
                        <p>最高额度：{{item.maxAmount}}万</p>
                        <p>期限范围：{{item.termRange}}</p>
                        <p>通过率：{{item.passingRate}}%</p>
                    </div>
                    <p class="consml_btn" v-html="listName"></p>
                </div>
            </div>
            <!--旧的-->
            <!--<div class="con_li" v-for="(item,index) in this.productlistdata" :key="index" @click="turn_share(item.id,ifuser)">-->
                <!--<div class="con_top">-->
                    <!--<img :src="item.image" alt="">-->
                    <!--<span>{{item.name}}</span>-->
                <!--</div>-->
                <!--<div class="con_btm">-->
                    <!--<div class="consml_lef">-->
                        <!--<div>{{item.reward?item.reward:0}}</div>-->
                        <!--<p>奖励</p>-->
                    <!--</div>-->
                    <!--<div class="consml_cen">-->
                        <!--<p>最高额度：{{item.maxAmount}}万</p>-->
                        <!--<p>期限范围：{{item.termRange}}</p>-->
                        <!--<p>通过率：{{item.passingRate}}%</p>-->
                    <!--</div>-->
                    <!--<div class="consml_rig">-->
                        <!--<p v-html="listName"></p>-->
                    <!--</div>-->
                <!--</div>-->
            <!--</div>-->
            <div class="addmore" v-html="addmore" @click="addmorefun()"></div>
        </div>
        <div class="conTent" v-show="iscur==1">
            <!--新的-->
            <div class="con_linew" v-for="(item,index) in this.productlistdata" :key="index" @click="turn_share(item.id,ifuser)">
                <div class="con_top">
                    <img :src="item.image" alt="">
                    <span>{{item.name}}</span>
                    <p>奖励<i>{{item.reward?item.reward:0}}</i></p>
                </div>
                <div class="consml_rig">
                    <div class="consml_cen">
                        <p>最高额度：{{item.maxAmount}}万</p>
                        <p>期限范围：{{item.termRange}}</p>
                        <p>通过率：{{item.passingRate}}%</p>
                    </div>
                    <p class="consml_btn" v-html="listName"></p>
                </div>
            </div>
            <!--<div class="con_li" v-for="(item,index) in this.productlistdata" :key="index" @click="turn_share(item.id,ifuser)">-->
                <!--<div class="con_top">-->
                    <!--<img :src="item.image" alt="">-->
                    <!--<span>{{item.name}}</span>-->
                <!--</div>-->
                <!--<div class="con_btm">-->
                    <!--<div class="consml_lef">-->
                        <!--<div>{{item.reward?item.reward:0}}</div>-->
                        <!--<p>奖励</p>-->
                    <!--</div>-->
                    <!--<div class="consml_cen">-->
                        <!--<p>最高额度：{{item.maxAmount}}万</p>-->
                        <!--<p>期限范围：{{item.termRange}}</p>-->
                        <!--<p>通过率：{{item.passingRate}}%</p>-->
                    <!--</div>-->
                    <!--<div class="consml_rig">-->
                        <!--<p  v-html="listName"></p>-->
                    <!--</div>-->
                <!--</div>-->
            <!--</div>-->

            <div class="addmore" v-html="addmore" @click="addmorefun()"></div>
        </div>
    </div>
</template>

<script>
    import { Toast } from 'mint-ui';
    export default {
        name: "productList",
        data() {
            return {
                myimg:"../images/pro_img2.jpg",
                iscur:0,
                pagenum:0,
                addmore:"加载更多...",
                productlistdata:[],
                navNamedai:"贷款推广",
                navNamedxin:"信用卡推广",
                listName:"立即推广",
                ifuser:"",
                ifsheniqng:true,
            }
        },
        mounted(){
            sessionStorage.idrefresh = true;

            //判断进入哪个
            let state = this.$route.query.state;
            if(state==0){
                this.iscur = 0;
            }else if(state==1){
                this.iscur = 1;
            }
            this.productlist(this.pagenum);
            //根据状态监测是什么名字
            let ifuser = this.$route.query.ifuser;
            this.ifuser = ifuser;
            // console.log(ifuser)
            if(ifuser=="true"){
                localStorage.removeItem("hhrdata");
                this.navNamedai="贷款申请";
                this.navNamedxin="信用卡申请";
                this.listName="立即申请";
                this.ifsheniqng = false;
            }else{
                this.navNamedai="贷款推广";
                this.navNamedxin="信用卡推广";
                this.listName="立即推广";
                this.ifsheniqng = true;
            }
        },
        methods: {
            //海报推广
            gohaibao(status){
                if(status=="1"){
                    this.$router.push({path: '/shareXinyongka', query: {selected: "2"}})
                }else{
                    this.$router.push({path: '/shareDaikuan', query: {selected: "2"}})
                }
            },
            changenav(statsu){
                this.productlistdata = [];
                this.pagenum = 0;
                this.addmore = "暂无更多";
                this.iscur=statsu;
                this.productlist(this.pagenum);
            },
            turn_share(status,ifuser){
                if(!status){
                    this.$router.push({path: '/customDetial', query: {selected: status,ifhhr:true,ifuser:ifuser}})
                }else{
                    this.$router.push({path: '/customDetial', query: {selected: status,ifuser:ifuser}})
                }
            },
            productlist(pageNum){
                this.axios({
                    method: 'post',
                    url: '/api/product/get',
                    // url: '/login',
                    // url:'http://localhost:8001/apis/login',
                    data: {
                        "pageNum": pageNum,
                        "pageSize": 8,
                        "productType": this.iscur
                    },
                    withCredentials: true,
                }).then((response) => {
                    console.log(response)
                    if(response.data.code==-8){
                        this.common.checkLogin(this);
                    }
                    if(response.data.code!=0){
                        Toast({
                            message: response.data.message,
                            position: 'center',
                            duration: 2000
                        });
                    }
                    response.data.data.dataList.forEach((value,index)=> {
                        //console.log(value)
                        this.productlistdata.push({
                            commission: value.commission,
                            conditions: value.conditions,
                            conditionsList: value.conditionsList,
                            creationTime: value.creationTime,
                            id: value.id,
                            image:"http://zadai.net:8006"+value.image,
                            introduction: value.introduction,
                            maxAmount: value.maxAmount,
                            name: value.name,
                            passingRate: value.passingRate,
                            productType: value.productType,
                            rate: value.rate,
                            reward: value.reward,
                            termRange: value.termRange,
                            weekDay: value.weekDay
                        })
                    });
                    if(response.data.data.totalPage > pageNum+1 ){
                        this.addmore = "加载更多...";
                    }else{
                        this.addmore = "暂无更多";
                    }
                }).catch((error) => {
                    console.log(error);
                });
            },
            addmorefun(){
                this.pagenum++;
                if(this.addmore=="加载更多..."){
                    this.productlist(this.pagenum);
                }
            }
        }
    }
</script>

<style scoped lang="less">
    .addmore{
        height: 0.8rem;
        text-align: center;
        line-height: 0.8rem;
        cursor: pointer;
    }
    .productList {
        background: rgba(244, 244, 244, 1);

        .yjtg{
            width: 1.26rem;
            height: 1.26rem;
            position: fixed;
            right: 0.2rem;
            bottom: 2rem;
            cursor: pointer;
            img{
                width: 100%;
            }
        }

        .conTent{
            overflow: hidden;
            background: #f4f4f4;
            padding-bottom: 1rem;
            .con_linew{
                width: 6.9rem;
                height: 2.8rem;
                margin: 0.2rem auto 0 auto;
                background: #fff;
                overflow: hidden;
                .con_top{
                    height: 0.9rem;
                    line-height: 0.9rem;
                    margin-top: 0.2rem;
                    img{
                        width: 0.5rem;
                        height: 0.5rem;
                        float: left;
                        margin: 0.2rem 0.2rem 0 0.3rem;
                    }
                    span{
                        float: left;
                        font-size:0.36rem;
                        font-weight:700;
                        color:#333;
                    }
                    p{
                        float: right;
                        color: #bbbbbb;
                        min-width: 2.2rem;
                        i{
                            font-size: 0.5rem;
                            font-weight: 500;
                            color: #f76260;
                            margin-left: 0.1rem;
                            margin-right: 0.2rem;
                        }
                    }
                }
                .consml_rig{
                    .consml_cen{
                        float: left;
                        margin-left: 0.72rem;
                        p{
                            font-size: 0.3rem;
                            font-weight: 400;
                            color: #bbbbbb;
                            line-height: 0.48rem;
                            padding-left: 0.3rem;
                        }
                    }
                    .consml_btn{
                        float: right;
                        width: 1.6rem;
                        height: 0.64rem;
                        border: 1px solid #2677f9;
                        border-radius: 0.06rem;
                        font-size: 0.28rem;
                        font-weight: 500;
                        color: #2677f9;
                        line-height: 0.64rem;
                        text-align: center;
                        cursor: pointer;
                        margin-top: 0.5rem;
                        margin-right: 0.5rem;
                    }
                }
            }
            .con_li{
                width: 6.9rem;
                height: 3rem;
                margin: 0.2rem auto 0 auto;
                background: #fff;
                overflow: hidden;
                .con_top{
                    height: 0.9rem;
                    line-height: 0.9rem;
                    margin-top: 0.2rem;
                    img{
                        width: 0.5rem;
                        height: 0.5rem;
                        float: left;
                        margin: 0.2rem 0.2rem 0 0.3rem;
                    }
                    span{
                        float: left;
                        font-size:0.36rem;
                        font-weight:500;
                        color:rgba(51,51,51,1);
                    }
                }

                .con_btm{
                    overflow: hidden;

                    .consml_lef{
                        float: left;
                        width: 2rem;
                        height: 1.2rem;
                        border-right: 0.02rem solid rgba(237,237,237,1);
                        text-align: center;
                        margin-top: 0.2rem;
                        div{
                            font-size:0.56rem;
                            font-weight:500;
                            color:rgba(247,98,96,1);
                        }
                        p{
                            font-size:0.26rem;
                            font-weight:400;
                            color:rgba(187,187,187,1);
                            margin-top: 0.1rem;
                        }
                    }
                    .consml_cen{
                        float: left;
                        width: 3rem;
                        padding-top: 0.1rem;
                        p{
                            font-size:0.26rem;
                            font-weight:400;
                            color:rgba(187,187,187,1);
                            line-height:0.48rem;
                            padding-left: 0.3rem;
                        }
                    }
                    .consml_rig{
                        float: left;
                        p{
                            width: 1.6rem;
                            height: 0.64rem;
                            border:1px solid rgba(38,119,249,1);
                            border-radius:0.06rem;
                            font-size:0.28rem;
                            font-weight:500;
                            color:rgba(38,119,249,1);
                            line-height:0.64rem;
                            text-align: center;
                            cursor: pointer;
                            margin-top: 0.5rem;
                        }
                    }
                }
            }
        }
    }
</style>
